<script type="text/javascript" src="${basePath}/js/tds-lun.js"></script>
<script type="text/javascript" src="${basePath}/js/tds-pool.js"></script>
<script type="text/javascript">
$(document).ready(function(){         
  	 $("div[target] ").click(function(){
		 $("div[target] ").removeClass("back_active");//首先移除全部的active
		 $(this).addClass("back_active");//选中的添加acrive
		// alert($(this).find("span").html()); 
	 });  
});
</script>
<style type="text/css">
.back_active {border:1px solid #286090;}
#pooldiv:hover{cursor:pointer;/*这里必须设为pointer才会对所有浏览器有效，hander只针对IE有效*/}
</style>

<#-- <div class="main_right_term">
	<p><@spring.message code='note.pool'/></p>
	 <p><@spring.message code='note.pg'/></p>
</div> -->
<div class="row main_right_content">
	
    <a id="createPoolBtn" class="btn btn-primary" href="javascript:void(0);"
    		onclick="pool.create();"><@spring.message code='button.create'/></a>
    <a id="modifyPoolBtn" class="btn btn-primary" href="javascript:void(0);"
   			onclick="pool.modify();"><@spring.message code='button.edit'/></a>
    <a id="removePoolBtn" class="btn btn-default" href="javascript:void(0);"
    		onclick="pool.remove();"><@spring.message code='button.remove'/></a>
    
    <!-- <span id="showObjectPoolText" class="r">对象存储池</span><input type="checkbox" id="showObjectPool" class="r"> -->
	
	<div id="list" style="margin-top: 10px;">
		<#if list??><#list list as item>
		<#assign poolUnique = (item.poolName?index_of(".") == 0)?string(item.poolName?replace(".", "_"), item.poolName)/>
		<#if SUPPORT_OBJECT?? && SUPPORT_OBJECT == "0" && (item.poolName?index_of(".") == 0)>
		<#else>
		<div class="panel panel-default" id="pooldiv" target="pooldiv" onclick="pool.poolmessage(this)" style="overflow:hidden">
			<div class="panel-heading">
			 <h3 class="panel-title" id="h3"><span  class="label <#if item.flags == 1>label-success<#else>label-danger</#if>" target="poolspan" id="poolspan" >${item.poolName!}</span></h3>
			</div>
			<div class="panel-body" style="width: 100%;height: 320px;float: left;overflow:hidden;">
				<div style="width: 15%;height: 320px;float: left;border-right: 1px solid #ddd;">
					<ul class="list-group">
		  				<#-- <li class="list-group-item"><@spring.message code='pool.storage.type'/>：<@spring.message code='pool.replication'/></li> -->
		  				<li class="list-group-item"><@spring.message code='pool.replication.factor'/>：${item.size!0}</li>
		  				<li class="list-group-item"><@spring.message code='pool.pg.count'/>：${item.pg_num}</li>
		  				<li class="list-group-item"><@spring.message code='pool.quota'/>：${item.quotaMax}</li>
		  				<li class="list-group-item"><@spring.message code='pool.crush_rule'/>：${item.rule_name}</li>
		  				<li class="list-group-item"><@spring.message code='pool.avail'/>：<p id="${poolUnique!}Avil" style="display:inline;"></p></li>
		  				<li class="list-group-item"><@spring.message code='pool.used'/>：<p id="${poolUnique!}Used" style="display:inline;"></p></li>
		  				<li class="list-group-item"><@spring.message code='pool.brand'/>：</li>
		  				<li><div id=${poolUnique!} class="easyui-progressbar" style="width:80%;margin-left:5%" aria-valuemin="0" aria-valuemax="100"></div></li>
		  			</ul>
				</div>
				
				<div id="${poolUnique!}_tu"  class="tabs-container" style="width: 45%;float: left;">
					<div class="poolTab">
    					<ul class="nav nav-tabs" role="tablist" id="${poolUnique!}_tab">
							<li role="presentation" class="active"><a href="#0"  onclick="test('${poolUnique!}','read','${item_index}')" role="tab" data-toggle="tab" aria-controls="read"><@spring.message code='pool.read'/></a></li>
							<li role="presentation" ><a href="#0" onclick="test('${poolUnique!}','write',${item_index})" role="tab" data-toggle="tab" aria-controls="write"><@spring.message code='pool.write'/></a></li>
							<li role="presentation" ><a href="#0" onclick="test('${poolUnique!}','operate',${item_index})" role="tab" data-toggle="tab" aria-controls="operate"><@spring.message code='pool.operate'/></a></li>
        				</ul>
    				</div>
					<div class="content" id="${poolUnique!}_content">
						<div role="tabpanel" class="tab-pane active" id="${poolUnique!}read" ></div>
						<div role="tabpanel" class="tab-pane" id="${poolUnique!}write" ></div>
						<div role="tabpanel" class="tab-pane" id="${poolUnique!}operate" ></div>
					</div>
				</div>
				
				<form id="${poolUnique!}Form" action="${basePath}/cluster/lun/listByPool" method="get">
					<input type="hidden" name="poolName" value="${item.poolName!}">
					<input type="hidden" name="pageSize" value="5" />
					<div id="${poolUnique!}LunList" style="width: 40%;height: 320px;float: left;border-left: 1px solid #ddd;overflow:auto;">
					</div>
				</form>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
		    	$(".poolTab a").click(function(e){
		    		e.preventDefault();
		    		$(this).tab("show");
		    	});
			});
						
			window.onload=function(){  
				pool.buildTimer("${list?size}");
			};
			
			pool.chartUsage("#${poolUnique!}", "${item.poolName!}");
			test('${poolUnique!}','read','${item_index}');
			
			function test(target,op,num){
				var her="#"+target+"_content .tab-pane";
				$(her).empty();
				if(op=='read'){
					pool.read(target,num);
				}
				if(op=='write'){
					pool.write(target,num);
				}
				if(op=='operate'){
					pool.operate(target,num);
				}
			};
			
			$("#${poolUnique!}Form").ajaxpager({
				target : "#${poolUnique!}LunList"
			});
			
		</script>

		</#if></#list>
		<#else>
		暂无存储池数据
		</#if>
	</div>
	
	<div id="createPoolDialog"></div>
	<div id="modifyPoolDialog"></div>
</div>
